<template>
	<view>
		<view class="wrap" v-if="showContent">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :label-position="labelPosition" label="标题" prop="title" label-width="150">
					<u-input :border="border" placeholder="请输入标题" v-model="model.title" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="简介" prop="intro" label-width="150">
					<u-input type="textarea" :border="border" placeholder="请填写简介" v-model="model.intro" />
				</u-form-item>
				<u-form-item :label-position="labelPosition" label=" " prop="intro" label-width="150">
					<upimg-box @callParent="callImgList" @callVadio="callVadio" :defaultImgsList="[]"></upimg-box>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="费用" prop="money" label-width="150">
					<u-input type="text" :border="border" placeholder="请填写费用" v-model="model.money" />
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="所在地区" prop="address" label-width="150">
					<picker @change="bindPickerChange" :value="addressIndex" mode="region">
						<view class="uni-input">
							{{addressIndex.length != 0 ? addressIndex[0] + ',' + addressIndex[1] + ',' + addressIndex[2] : '地区选择' }}
						</view>
					</picker>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="类型" prop="type" label-width="150">
					<picker @change="bindPickerChangeType" :value="model.type" :range="list" range-key="title">
						<view class="uni-input">{{typeTitle == '' ? '类型选择' :list[typeIndex].title}}</view>
					</picker>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="时间" prop="time" label-width="150">
					<picker mode="date" :value="model.time" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{model.time}}</view>
					</picker>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="联系人手机" prop="userPhone" label-width="150">
					<u-input :border="border" placeholder="请输入联系人手机号" v-model="model.userPhone" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-position=" labelPosition" label="联系人" prop="userName" label-width="150">
					<u-input :border="border" placeholder="请输入联系人" v-model="model.userName" type="text"></u-input>
				</u-form-item>
				<view class="" style="display: flex;align-items: center;">
					是否公开联系方式:<u-switch v-model="model.showPhone" @change="changeShow"></u-switch>
				</view>
				<button type="default" @tap.stop="formSubmit">提交</button>
			</u-form>
		</view>
		<view v-else style="height:100vh;text-align: center;">
			<view class="comment" v-for="(res, index) in commentList" :key="res.id">
				<view class="left">
					<image :src="res.url" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">{{ res.name }}</view>
						<view class="like" :class="{ highlight: res.isLike }">
							<view class="num">{{ res.likeNum }}</view>
							<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a"
								@click="getLike(index)"></u-icon>
							<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
						</view>
					</view>
					<view class="content">{{ res.contentText }}</view>
					<view class="reply-box">
						<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
							<view class="username">{{ item.name }}</view>
							<view class="text">{{ item.contentStr }}</view>
						</view>
						<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
							共{{ res.allReply }}条回复
							<u-icon class="more" name="arrow-right" :size="26"></u-icon>
						</view>
					</view>
					<view class="bottom">
						{{ res.date }}
						<view class="reply">回复</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 模拟提示 -->
		<u-toast ref="uToast" />
		<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="24" width="580">
			<view class="padding-xl">
				<view>当前进度：</view>
				<u-line-progress active-color="#2979ff" height="20" :percent="progress"></u-line-progress>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import list from '../../common/new.js'
	import upimgBox from "@/components/upimgbox.vue";
	import {
		mapGetters
	} from 'vuex';
	var app = getApp()
	export default {
		components: {
			upimgBox,
		},
		data: function() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				list: list,
				typeIndex: 0,
				typeTitle: '',
				addressIndex: [],
				username: '',
				imgsList: [],
				current: 0,
				confirmShow: false,
				confirmContent: '',
				show: false,
				showContent: false,
				progress: 0,
				value: '',
				commentList: [],
				userInfo: {},
				addressType: false,
				adressValue: '',
				addinfo: '',
				GAODE_URL: 'https://restapi.amap.com/v3/geocode/regeo',
				GAODE_MAP_KEY: '9868d60a7c260f5182f44268f780a9d5',
				rules: {},
				border: false,
				pickerShow: false,
				selectShow: false,
				labelPosition: 'left',
				errorType: ['message'],
				model: {
					title: '',
					intro: '',
					showPhone: true,
					type: '',
					userName: '',
					userPhone: '',
					time: currentDate,
					money: '',
					address: '',
				},
				srcVideo:'',
			}
		},
		onLoad: function() {
			this.getShow()
			this.userInfo = uni.getStorageSync('userInfo')
			this.username = this.userInfo.username || this.$store.getters.userInfo.username;
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.model.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.addressIndex = e.target.value
				this.model.address = e.target.value
			},
			bindPickerChangeType(e) {
				this.typeTitle = this.list[e.target.value]
				this.typeIndex = e.target.value
				this.model.type = e.target.value
			},
			changeShow(e) {
				console.log('e', e)
				this.model.showPhone = e
			},
			getShow() {
				var that = this
				uniCloud.callFunction({
					name: 'mwj',
					data: {
						action: "getList"
					}
				}).then((res) => {
					if ((res.result.data[0].show && res.result.data[0].data) !== app.globalData.edition) {
						that.showContent = true
					} else {
						this.getComment()
					}
				}).catch((err) => {
					console.error(err)
				})
			},
			callImgList: function(e) {
				this.imgsList = e;
			},
			
			callVadio: function(e) {
				this.srcVideo = e;
			},
			// 发布图片
			formSubmit: function(e) {
				var params = {}
				if (this.imgsList.length == 0 && this.srcVideo == '') {
					uni.showToast({
						title: "图片或视频至少上传一种！",
						icon: 'none'
					})
					return
				}
				if (!this.model.title) {
					uni.showToast({
						title: "标题不能为空！",
						icon: 'none'
					})
					return
				}
				if (!this.model.userName) {
					uni.showToast({
						title: "联系人不能为空！",
						icon: 'none'
					})
					return
				}
				if (!this.model.userPhone) {
					uni.showToast({
						title: "联系方式不能为空！",
						icon: 'none'
					})
					return
				}
				if (!this.model.money) {
					uni.showToast({
						title: "金额不能为空！",
						icon: 'none'
					})
					return
				}
				if (!this.model.address) {
					uni.showToast({
						title: "地点不能为空！",
						icon: 'none'
					})
					return
				}
				if (!this.model.type) {
					uni.showToast({
						title: "类型不能为空！",
						icon: 'none'
					})
					return
				}
				// 发送的内容
				params.createTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
				if (this.imgsList) {
					params.imgList = this.imgsList;
				}
				if (this.srcVideo) {
					params.srcVideo = this.srcVideo
				}
				params.userid = this.userInfo._id;
				// 谁发布的
				params.title = this.model.title;
				params.address = this.model.address;
				params.money = this.model.money;
				params.time = this.model.time;
				params.userName = this.model.userName;
				params.userPhone = this.model.userPhone;
				params.viewNum = 0;
				params.openNum = 0;
				params.type = this.model.type;
				// params.userPhone = this.model.userPhone;
				params.showPhone = this.model.showPhone;
				params.status = 0;
				
				uniCloud.callFunction({
					name: 'announcement',
					data: {
						cloudAction: "save",
						params: params
					}
				}).then((res) => {
					if (res) {
						uni.showToast({
							title: "发布成功",
							success: function(res) {
								console.log('已发布')
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msgger,
							icon: "none",
						})
					}
				}).catch((err) => {
					console.error(err)
				})
			}, // 点赞
			getLike(index) {
				this.commentList[index].isLike = !this.commentList[index].isLike;
				if (this.commentList[index].isLike == true) {
					this.commentList[index].likeNum++;
				} else {
					this.commentList[index].likeNum--;
				}
			},
			// 评论列表
			getComment() {
				this.commentList = [{
						id: 1,
						name: '叶轻眉',
						date: '12-25 18:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 12,
						likeNum: 33,
						isLike: false,
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '粘粘',
								contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
							}
						]
					},
					{
						id: 2,
						name: '叶轻眉1',
						date: '01-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 11,
						isLike: false,
						url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
					},
					{
						id: 3,
						name: '叶轻眉2',
						date: '03-25 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						allReply: 0,
						likeNum: 21,
						isLike: false,
						allReply: 2,
						url: '../../../static/logo.png',
						replyList: [{
								name: 'uview',
								contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
							},
							{
								name: '豆包',
								contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
							}
						]
					},
					{
						id: 4,
						name: '叶轻眉3',
						date: '06-20 13:58',
						contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
						url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
						allReply: 0,
						likeNum: 150,
						isLike: false
					}
				];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		padding: 20upx;
	}

	.swiper-box {
		flex: 1;
		height: 90vh;
	}

	.swiper-item {
		height: 100%;
	}

	.text-title {
		background-color: #f1f1f1;
		border-radius: 20upx;
		height: 150upx;
		width: 100%;
		padding: 20upx;
	}

	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {
				background-color: rgb(242, 242, 242);
				border-radius: 12rpx;

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}

	.addressRight {
		text-align: right;
	}

	.wrap {
		padding: 30rpx;
	}
</style>
